<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onLoad">
      <van-cell v-for="data in datalist" :key="data.filmId" @click="handleClick(data.filmId)">
        <img :src="data.poster">
        <h3>{{data.name}}</h3>
        <p>主演：{{data.actors | actorFilter}}</p>
        <p>{{data.nation}} | {{data.runtime}} 分钟</p>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import http from '@/util/http'
import Vue from 'vue'
import { List, Cell } from 'vant'
import { mapState } from 'vuex'

Vue.use(List).use(Cell)

Vue.filter('actorFilter', (actors) => {
  if (actors === undefined) return '暂无主演'
  return actors.map(item => item.name).join(' ')
})
export default {
  name: '',

  data () {
    return {
      datalist: [],
      loading: false, // 是否正在加载中,防止多次触发
      finished: false,
      current: 1, // 记录第几页数据
      total: 0
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId'])
  },
  mounted () {
    http({
      method: 'get',
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=2291707`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      // console.log(res.data.data.films)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },
  methods: {
    onLoad () {
      if (this.datalist.length === this.total && this.datalist.length !== 0) {
        this.finished = true
        return
      }
      // console.log('到底了')
      // 1.ajax请求新页面数据,
      // 2.合并新数据到老数据
      // 3. this.loading=false
      this.current++
      http({
        method: 'get',
        url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=2291707`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        // console.log(res.data.data.films)
        this.datalist = [...this.datalist, ...res.data.data.films]
        this.loading = false
      })
    },
    handleClick (id) {
      // 路径
      // this.$router.push(`/detail/${id}`)
      // 名字
      // this.$router.push({
      //   name: 'xiaohuDetail',
      //   params: {
      //     myid: id
      //   }
      // })
      // query 方式跳转
      this.$router.push(`/detail?id=${id}`)
    }
  }
}

</script>
<style scoped lang='less'>
.van-list {
  .van-cell{
    overflow: hidden;
    padding: 10px;
    img{
      float: left;
      width: 100px;
    }
    p{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
